<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mock Gen</title>
    <link rel="icon" type="image/svg" href="./logo-2.svg" />
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div id="app">
      <div id="left">
        <div>
          请在下方填入 Mock.js 模板语法（失去焦点自动格式化，并生成数据）
        </div>
        <textarea v-model="jsonStr" @blur="onBlur" ref="leftTextarea"></textarea>
        <div v-show="errMsg" class="err_msg" v-text="`错误消息：${ errMsg }`"></div>

        <div style="display: flex; gap: 10px;">
          <pre>已扩展 Mock.Random 占位符：
1. @MOBILE()，手机号码
2. @TEL()，固定电话号码（国内）
3. @DATE.NOW()，当前毫秒数</pre>
          <pre>扩展代码：
Mock.Random.extend({
  "DATE.NOW": () => Date.now(),
  MOBILE: () => Mock.mock(/^1[35678]\d{9}$/),
  TEL: () => Mock.mock(/^0\d{2,3}-[1-9]\d{6,7}$/)
})</pre>
        </div>
      </div>
      <div id="right">
        <div>生成的数据：</div>
        <textarea v-model="jsonStrOfMock"></textarea>
      </div>
    </div>

    <script src="./lib/vue.js"></script>
    <script src="./lib/mock.js"></script>
    <script src="./index.js"></script>
  </body>
</html>
